<template>
  <view class="goodsPublish-view">
    <view class="search-view">
      <u-search :placeholder="$t('common.search')" :disabled="true" @click="clickSearch" v-model="serachValue" :show-action="false" @change="serachChange" height="37" />
    </view>

    <!-- 加载商品列表，使用 scroll-view 实现分页滚动加载 -->
    <scroll-view
        @scrolltolower="initData"
        scroll-y
        lower-threshold="50"
        style="height: calc(100vh - 154rpx);"

    >
      <view class="goods-list">
        <view class="goods" v-if="item.commodityPublish" @tap="goDetils(item.commodityPublish.id)" v-for="item in testData">
          <image :src="item.picture" mode="aspectFit" class="goods-img"></image>
          <view class="goods-desc">
            <h3>{{item.commodityPublish.commodity}}</h3>

            <view class="price-hint" style="color: red" v-if="item.commodityPublish.bidMax - item.bid <= 0">
              {{$t("auctionRecord.bestPrice")}}: {{ '$' + String(item.bid).replace(/\B(?=(\d{3})+(?!\d))/g, ',') }}
            </view>
            <view class="price-hint" v-else>
              <view class="" style="margin-bottom: 10rpx;">
                {{$t("auctionRecord.bestPriceLow")}}: {{ '$' + String(item.bid).replace(/\B(?=(\d{3})+(?!\d))/g, ',') }}
              </view>
              <view class="" style="color: red">
                {{$t("auctionRecord.bestPriceUp")}}: {{ '$' + String(item.commodityPublish.bidMax).replace(/\B(?=(\d{3})+(?!\d))/g, ',') }}
              </view>
            </view>
            <view class="price-sell">
              <view class="price">
                $ {{String(item.commodityPublish.money).replace(/(\d)(?=(?:\d{3})+$)/g, '$1,')}}
              </view>
              <!-- <view class="low-price">
                {{$t('common.lowestQuotation')}}
              </view> -->
              <view class="sell">
                {{item.commodityPublish.status==1?$t('common.noSold'):item.commodityPublish.status==2?$t('common.shelf'):$t('common.sold')}}
              </view>
            </view>
            <view class="auction-btn">
              <AuctionButton :auction="item.commodityPublish.status" :item="item.commodityPublish"></AuctionButton>
              <AuctionButton :lookPriceItem="item.commodityPublish" :item="item.commodityPublish" :picture="item.picture" :auction="item.commodityPublish.status"></AuctionButton>
            </view>
          </view>
        </view>
      </view>
      <!-- 加载提示 -->
      <view v-if="loading" style="text-align:center; padding: 20rpx;">{{$t('Loading')}}...</view>
    </scroll-view>
  </view>
</template>

<script>
	import AuctionButton from "../../components/AuctionButton/AuctionButton.vue"
	import { getRecord } from "@/common/api.js"

	export default {
		data() {
			return {
        serachValue: "",
        checked: true,
        testData: [],
        pageNum: 1,
        pageSize: 10,
        total: 0,
        loading: false,
        finished: false
			}
		},
		methods: {
			clickSearch() {
				uni.navigateTo({
					url: "/pages/search/search"
				})
			},
			serachChange(e) {
				console.log("搜索值:", e);
			},
			// 跳转详情
			goDetils(id) {
				// uni.navigateTo({
				// 	url: "../../pages/commodityDetails/commodityDetails"
				// })
				uni.navigateTo({
					url: `/pages/commodityDetails/commodityDetails?id=${id}`
				})
			},
      async initData() {
        if (this.loading || this.finished) return;

        this.loading = true;

        const res = await getRecord({
          pageNum: this.pageNum,
          pageSize: this.pageSize
        });

        if (res.code === 200) {
          const list = res.rows || [];
          this.testData = [...this.testData, ...list];
          this.total = res.total;

          if (this.testData.length >= this.total) {
            this.finished = true;
          } else {
            this.pageNum++;
          }
        }

        this.loading = false;
      }
		},
		components: {
			AuctionButton
		},
		onReady() {
			uni.setNavigationBarTitle({ title: this.$t("auctionRecord.title")});
		},
		onLoad() {
			this.initData();
		}
	}
</script>

<style lang="scss" scoped>
	page {
		width: 100%;
		height: 100%;
		background-color: #FBFBFB;
	}

	.price-hint {
		color: #8a8aa1;
		font-family: PingFang SC;
		font-weight: bold;
		font-size: 20rpx;
		margin: 10rpx 0;
	}

	.goodsPublish-view {
		width: 100%;
		height: 100%;
	}

	.search-view {
		padding: 14rpx 22rpx;
		position: fixed;
		/* #ifdef APP */
		top: 0;
		/* #endif */

		/* #ifdef H5 */
		top: 86rpx;
		/* #endif */
		left: 0;
		right: 0;
		z-index: 999;
		background-color: #fff;
	}

	.sustain-push {
		background-color: #fff;
		display: flex;
		justify-content: space-between;
		align-items: center;
		margin-top: 48rpx;
		margin-bottom: 16rpx;

		.push-word {
			color: #000000;
			font-family: PingFang SC;
			font-weight: bold;
			font-size: 24rpx;
			letter-spacing: 0rpx;
			text-align: center;
		}
	}

	.goods-list {
		height: 100%;
		background: #FBFBFB;
		padding: 0 30rpx;
		padding-top: 20rpx;
		margin-top: 154rpx;
	}

	.goods:first-child {
		margin: 0;
	}

	.goods {
		// height: 208rpx;
		display: flex;
		justify-content: space-between;
		align-items: center;
		margin-top: 15rpx;

		.goods-img {
			width: 300rpx;
			height: 208rpx;
			border-radius: 20rpx;
		}

		.goods-desc {
			// margin-left: 18rpx;
			position: relative;
			display: flex;
			flex-direction: column;
			justify-content: space-between;

			h3 {
				color: #000000;
				font-family: PingFang SC;
				font-weight: bold;
				font-size: 30rpx;
				letter-spacing: 0rpx;
				text-align: left;
				width: 356rpx;
				overflow: hidden;
				text-overflow: ellipsis;
				white-space: nowrap;
			}

			.price-sell {
				display: flex;
				align-items: flex-end;
				// margin-top: 24rpx;
				margin-bottom: 10rpx;

				.price {
					color: #FAAD67;
					font-family: PingFang SC;
					font-weight: bold;
					font-size: 36rpx;
					letter-spacing: 0rpx;
					vertical-align: bottom;
				}

				.low-price {
					color: #FAAD67;
					font-family: PingFang SC;
					font-weight: bold;
					font-size: 20rpx;
					line-height: 42rpx;
					letter-spacing: 0rpx;
					margin-left: 10rpx;
				}

				.sell {
					color: #717184;
					font-family: PingFang SC;
					font-weight: bold;
					font-size: 20rpx;
					line-height: 42rpx;
					letter-spacing: 0rpx;
					margin-left: 10rpx;
				}
			}

			button {
				border-radius: 20rpx;
				background: #FAAD67;
				width: 190rpx;
				height: 78rpx;
				text-align: center;
				line-height: 78rpx;
				position: absolute;
				right: 0;
				bottom: 0;
			}
		}
	}

	.auction-btn {
		display: flex;
		justify-content: space-between;
		// flex-direction: row-reverse;
	}
</style>
